import React from 'react'
import QRCode from 'qrcode.react'

class QrGenerator extends React.Component {
    constructor(props) {
        super(props);
        this.state = { appid: 'wx8c6852df92fcfc6b', uri: 'http://wechat.juzhen.net', qr: '' };

        this.onAppVauleChange = this.onAppVauleChange.bind(this);
        this.onUrlVauleChange = this.onUrlVauleChange.bind(this);
    }

    // 
    onAppVauleChange = (params) => {
        this.setState({
            appid: params.target.value
        })
    }

    // 
    onUrlVauleChange = (params) => {
        this.setState({
            uri: params.target.value
        })
    }

    // 生成授权URL链接
    auth = function () {
        var tpaUri = "http://wechat.juzhen.net/tpa_autho.html";
        var newUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='
            + this.state.appid
            + '&redirect_uri='
            + encodeURIComponent(tpaUri) + '&response_type=code&scope=snsapi_userinfo&state=' + (this.state.uri ? encodeURIComponent(this.state.uri) : 'STATE') + '#wechat_redirect';
        return newUrl;
    }

    render() {
        return (
            <div className='fadeIn'>
                <h3>三方授权地址生成</h3>
                <div className="qrgenerator">
                    <div>
                        微信APPID: <input type="text" onChange={this.onAppVauleChange} value={this.state.appid} />
                    </div>
                    <div>
                        活动地址: <input type="text" onChange={this.onUrlVauleChange} value={this.state.uri} />
                    </div>
                    <div>
                        授权地址(分享地址): <p>{this.auth()}</p>
                    </div>
                    <div className="qr-wrap">
                        <QRCode value={this.auth()} size={256} level="Q" />
                    </div>
                </div>
            </div>

        )
    }
}

export default QrGenerator;